<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件下载与进度</title>
    <style>
        .file-info button {
            margin-right: 10px;
        }

        .file-info span {
            margin-right: 10px;
        }
    </style>
</head>
<body>
<h3>文件下载页面</h3>
<div class="modal-body form">
    <!-- 文件下载 -->
    <form id="dialogForm" class="form-horizontal">
        <div class="form-group">
            <label class="control-label">下载进度:</label>
            <div>
                <!-- 进度条 -->
                <div id="progress-body">
                    <progress id="download-progress"></progress>
                    <div id="progress-bar">0%</div>
                </div>
            </div>
        </div>
    </form>
    <br>

    <a href="index.html" id="a">上传文件</a>

    <br>
    <br>

    <button id="download-selected-button" onclick=handleDownloadSelectedFiles()>下载所选文件</button>
    <button id="delete-selected-button" onclick=handleDeleteSelectedFiles()>删除所选文件</button>

    <!-- 显示文件列表 -->
    <ul id="file-list"></ul>
</div>

<script>
    // 刷新文件列表
    function refreshFileList() {
        fetch('/file/list')
            .then(response => response.json())
            .then(data => {
                displayFileList(data);
            })
            .catch(error => {
                console.error('获取文件列表错误:', error);
            });
    }

    // 显示文件列表
    function displayFileList(fileList) {
        const fileListContainer = document.getElementById('file-list');
        fileListContainer.innerHTML = ''; // 清空列表

        fileList.forEach(file => {
            const listItem = document.createElement('li');
            listItem.classList.add('file-info'); // 添加新的 CSS 类

            // 创建多选框, 并将文件名作为 value 属性
            const checkbox = createCheckbox(file);

            // 创建预览按钮
            const previewButton = createButton('预览', '预览', file, previewFile);

            const filenameSpan = document.createElement('span');
            filenameSpan.textContent = file;

            listItem.appendChild(checkbox);
            listItem.appendChild(previewButton);
            listItem.appendChild(filenameSpan);
            fileListContainer.appendChild(listItem);
        });
    }

    // 创建多选框
    function createCheckbox(value) {
        const checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.value = value;
        return checkbox;
    }

    // 获取选中的文件名
    function getSelectedFiles() {
        const checkboxes = document.querySelectorAll('#file-list input[type="checkbox"]:checked');
        const selectedFiles = Array.from(checkboxes).map(checkbox => checkbox.value);
        return selectedFiles.join(',');
    }

    // 处理下载所选文件按钮点击事件
    function handleDownloadSelectedFiles() {
        const selectedFiles = getSelectedFiles();
        download(selectedFiles);
    }

    // 处理删除所选文件按钮点击事件
    function handleDeleteSelectedFiles() {
        const selectedFiles = getSelectedFiles();
        deleteFile(selectedFiles);
    }

    // 创建按钮
    function createButton(text, title, data, clickHandler) {
        const button = document.createElement('button');
        button.textContent = text;
        button.title = title;
        button.setAttribute('data-filename', data); // 存储文件名
        button.addEventListener('click', clickHandler);
        return button;
    }

    // 处理删除按钮点击事件
    function deleteFile(filename) {
        const confirmation = confirm("确定要删除文件吗?");
        if (!confirmation) {
            return;
        }

        fetch('/file/delete', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ fileName: filename })
        })

            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // 删除成功后刷新文件列表
                    refreshFileList();
                } else {
                    alert("文件删除失败");
                }
            })
            .catch(error => {
                console.error('删除文件错误:', error);
                alert("文件删除失败");
            });
    }

    // 处理预览按钮点击事件
    function previewFile(event) {
        const filename = event.target.getAttribute('data-filename');
        fetch('/file/preview?fileName=' + encodeURIComponent(filename))
            .then(response => response.blob())
            .then(blob => {
                const fileType = getFileType(filename);
                if (blob.type.startsWith('text') || isImage(fileType) || isAudio(fileType) || isVideo(fileType)) {
                    const blobUrl = URL.createObjectURL(blob);
                    window.location.href = blobUrl; // 跳转到预览页面
                } else {
                    alert('不支持的文件类型');
                }
            })
            .catch(error => {
                console.error('预览文件错误:', error);
                alert('预览文件失败');
            });
    }

    // 获取文件类型
    function getFileType(fileName) {
        return fileName.split('.').pop().toLowerCase();
    }

    // 判断是否图片文件
    function isImage(fileType) {
        return ['jpg', 'jpeg', 'png', 'gif', 'bmp'].indexOf(fileType) !== -1;
    }

    // 判断是否音频文件
    function isAudio(fileType) {
        return ['mp3', 'ogg', 'wav'].indexOf(fileType) !== -1;
    }

    // 判断是否视频文件
    function isVideo(fileType) {
        return ['mp4', 'avi', 'mov', 'wmv', 'mkv'].indexOf(fileType) !== -1;
    }

    // 重置进度条和文件名
    function resetProgressBar() {
        const progressBar = document.getElementById('download-progress');
        progressBar.value = 0;
        progressBar.max = 100;
        document.getElementById('progress-bar').textContent = '0%';
    }

    // 文件下载
    function download(filename) {
        const progressBar = document.getElementById('download-progress');
        const progressBarContainer = document.getElementById('progress-body');

        // 创建一个随机的下载链接，以防浏览器缓存问题
        const downloadLink = document.createElement('a');
        downloadLink.style.display = 'none';
        document.body.appendChild(downloadLink);

        fetch('/file/download?filename=' + encodeURIComponent(filename))
            .then(response => {
                if (!response.ok) {
                    throw new Error('下载文件失败');
                }
                // 获取文件总大小，从响应头中获取
                const totalSize = parseInt(response.headers.get('Content-Length'));
                let downloadedSize = 0;

                // 创建可写流
                const writableStream = new WritableStream({
                    write(chunk) {
                        downloadedSize += chunk.length;
                        const percent = ((downloadedSize / totalSize) * 100).toFixed(2);

                        // 更新进度条和显示
                        progressBar.value = downloadedSize;
                        progressBar.max = totalSize;
                        document.getElementById('progress-bar').textContent = percent + "%";

                        // 检查是否下载完成
                        if (downloadedSize === totalSize) {
                            setTimeout(() => {
                                alert('下载完成'); // 弹窗提示下载完成
                                resetProgressBar(); // 重置进度条
                                // location.reload(); // 刷新页面
                            }, 150);
                        }
                    }
                });

                // 使用 Response Body 的管道机制来写入可写流
                return response.body.pipeTo(writableStream);
            })
            .catch(error => {
                console.error('下载文件错误:', error);
                alert('下载文件失败');
            })
            .finally(() => {
                // 移除临时下载链接
                document.body.removeChild(downloadLink);
            });

        // 模拟点击下载链接
        downloadLink.href = '/file/download?filename=' + encodeURIComponent(filename);
        downloadLink.click();
    }

    // 页面加载时刷新文件列表
    document.addEventListener("DOMContentLoaded", function () {
        refreshFileList();
    });

</script>
</body>
</html>
